<template>
    <div class="chart-container">
        <div class="chart-title-wrapper">
            <div class="chart-title-block"></div>
            <div class="chart-title" style="opacity:1;">各区域计划比重</div>
            <div class="btn-wrapper">
                <div :class="activeTab=='product-num'?'btn-item active':'btn-item'" 
                @click="handleTab('product-num')">户数占⽐</div>
                <div :class="activeTab=='area-num'?'btn-item active':'btn-item'" 
                @click="handleTab('area-num')">面积占比</div>
                <div :class="activeTab=='project-num'?'btn-item active':'btn-item'" 
                @click="handleTab('project-num')">项目数量</div>
            </div>
        </div>
        <div class="chart-content-wrapper">
            <div id="plan-proportion-chart" class="chart-content"></div>
        </div>
    </div>
</template>

<script>
import { piechart,cycledrow } from '@/utils/chart.js';
import { getPlanProportionHouse,getPlanProportionArea,getPlanProportionProject } from '@/api/index.js';
export default {
    name: '',
    components:{
      
    },
    props:{
        year: {
            type: String
        }
    },
    watch:{
        year(val, oldVal){
            this.getTableData();
        }
    },
    data() {
        return {
            activeTab:'product-num'
        }
    },
    mounted(){
        var _this=this;
        this.$nextTick(function(){
            this.getTableData();
            cycledrow('plan-proportion-chart',function(){
                _this.getTableData();
            });
        });
    },
    methods: {
        handleTab(target){
            this.activeTab=target;
            this.getTableData();
        },
        getTableData(){
            var _this=this;
            var activeTab=this.activeTab;
            switch(activeTab){
                case 'product-num':
                    getPlanProportionHouse({
                        year:this.year
                    }).then(res => {
                        if(res.code==200){
                            var data=res.data;
                            _this.resetData(data);
                        }
                        return;
                    }).catch(err => {
                        console.log(err);
                    });
                    break;
                case 'area-num':
                    getPlanProportionArea({
                        year:this.year
                    }).then(res => {
                        if(res.code==200){
                            var data=res.data;
                            _this.resetData(data);
                        }
                        return;
                    }).catch(err => {
                        console.log(err);
                    });
                    break;
                case 'project-num':
                    getPlanProportionProject({
                        year:this.year
                    }).then(res => {
                        if(res.code==200){
                            var data=res.data;
                            _this.resetData(data);
                        }
                        return;
                    }).catch(err => {
                        console.log(err);
                    });
                    break;
            }
        },
        resetData(arr){
            var xdata=[];
            var xdata2=[];
            var num=(arr.length)/2;
            if(num>arr.length){
                num++;
            }else{
                num=num.toFixed(0);
            }
            var newArr=[];
            for(var i=0;i<arr.length;i++){
                var item=arr[i];
                if(i<num){
                    xdata.push(item.name);
                }else{
                    xdata2.push(item.name);
                }
                var obj={
                    name:item.name,
                    value:parseFloat(item.value)
                }
                newArr.push(obj);
                if(i==arr.length-1){
                    var params={
                        id:'plan-proportion-chart',
                        label1:xdata,
                        label2:xdata2,
                        data:newArr
                    }
                    piechart(params);
                }
            }
        }
    }
}
</script>

<style scoped>
.chart-container{
    width:100%;
    height:100%;
    display:flex;
    flex-direction: column;
}
.chart-content-wrapper{
    flex:1;
    width:100%;
    display: flex;
}
.chart-content{
    flex:1;
}
.chart-title-wrapper{
    width:97%;
    margin:0 auto;
    height:80px;
    display:flex;
    justify-content: space-between;
    position:relative;
}
.chart-title-block{
    width: 255px;
    height: 38px;
    background: linear-gradient(90deg, #05FCFC 0%, #171B26 100%);
    opacity: 0.28;
    position:relative;
    left:30px;
    top:35px;
}
.chart-title{
    font-size: 24px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #01F4F5;
    line-height: 33px;
    letter-spacing: 3px;
    position: absolute;
    top:36px;
    left:39px;
    white-space: nowrap;
}
.btn-wrapper{
    position:absolute;
    top:60px;
    right:25px;
    display:flex;
}
.btn-item{
    width: 70px;
    height: 33px;
    border: 1px solid #04B2B8;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 33px;
    text-align:center;
}
.btn-item:hover{
    cursor:pointer;
    opacity:0.8;
}
.active{
    background: #02D0D1;
}
</style>


